<template>
    <div>
        <div class="detail-food">
            <div class="food-img">
                <img :src="cookbookData.cook_book_image" alt="">
            </div>
            <div class="return" @click="goback">
                <van-icon name="arrow-left" />
            </div>
            <div class="food-name">
                <span>{{ cookbookData.cook_book_title }}</span>
            </div>
            <div class="message">
                <img class="head-shot" src="../assets/images/1.png" alt="">
                <p class="user-name">{{ cookbookData.user_name }}</p>
                <p class="level">LV.1</p>
                <div>
                    <button class="focus" @click="toggleFollow" :class="{ 'btn-followed': state.isFollowing }">
                        {{ state.isFollowing ? '取消关注' : '关注' }}
                    </button>
                </div>
            </div>
            <div class="introduce">
                <p>
                    {{ cookbookData.describe }}
                </p>
            </div>
            <div class="food-ingredient">
                <div class="ingredient-header">
                    <span class="ingredient-list">
                        食材清单
                    </span>
                    <span class="join-list" @click="togglePurchaseList">
                        {{ isInShoppingList ? '移除采购清单' : '加入采购清单' }}
                    </span>
                </div>
                <div class="ingredient-footer">
                    <p>{{ cookbookData.material }}</p>
                </div>
            </div>
            <div class="cooking-procedure">
                <div class="cooking-header">
                    <span class="cooking-name">
                        烹饪步骤
                    </span>
                    <span class="cooking-detail">
                        点击图片进入烹饪模式
                    </span>
                </div>
                <div class="cooking-footer">
                    <div>
                        <p>步骤1/7</p>
                        <div class="step"><img :src="cookbookData.cook_book_image" alt=""></div>
                    </div>
                    <div>
                        <p>步骤2/7</p>
                        <div class="step"><img :src="cookbookData.cook_book_image" alt=""></div>
                    </div>
                    <div>
                        <p>步骤3/7</p>
                        <div class="step"><img :src="cookbookData.cook_book_image" alt=""></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="commit">
            <div class="commit-detail">
                <CommentForm :postId="postId" :userId="userId" :userName="userName" @commentPosted="handleCommentPosted" />
                <CommentList :comments="comments" @commentPosted="handleCommentPosted" />
                <div class="collect">
                    <div class="collect-img">
                        <img src="../assets/images/collect.svg" alt="">
                    </div>
                </div>
                <div class="learn">
                    <div class="caregry">
                        <img src="../assets/images//categry.svg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import http from '../tools/axios';
import CommentList from './commentList.vue';
import CommentForm from './commentForm.vue';
const router = useRouter();
const currentUrl = window.location.href;
const cook_book_id = currentUrl.substring(currentUrl.lastIndexOf('/') + 1);
const cookbookData = ref(
    { cook_book_title: '脆皮豆腐', cook_book_image: 'http://localhost:5000/upload/view/doufu.jpg', describe: '豆腐这样做，太好吃了！一碗菜能吃十碗饭', material: '老豆腐、蒜、香葱末、芝麻、蚝油、糖、盐、小米辣、醋、生抽' }
)
let followId = ref();
const getCookbook = (cook_book_id) => {
    http.get('/cook/info', { params: { "cook_book_id": parseInt(cook_book_id) } }).then((res) => {
        if (res.data.code === 200) {
            cookbookData.value = res.data.data[0];
            console.log(cookbookData.value);
            followId.value = cookbookData.value.user_id;

        } else {
            console.log('error');
        }
    })
}
getCookbook(cook_book_id);
const goback = () => {
    router.go(-1);
}
const state = reactive({
    isFollowing: false, // 当前关注状态，默认为未关注
});
const userId = localStorage.getItem('userId');
const Id = ref(null);
const toggleFollow = () => {
    if (!state.isFollowing) {
        http.post('/user/follow', { "user_id": userId, "follow_id": followId.value }).then((res) => {
            console.log(res);
            if (res.data.code === 0) {
                state.isFollowing = true;
                Id.value = res.data.data.id;
            } else {
                console.log('error');
            }
        })
    } else {
        http.post('/user/cancelfollow', { "id": Id.value }).then((res) => {
            console.log(res);
            if (res.data.code === 0) {
                state.isFollowing = false;
            } else {
                console.log('error');
            }
        })
    }
};
const isInShoppingList = ref(false);
const togglePurchaseList = () => {
    if (!isInShoppingList.value) {
        http.post('/cook/buy', { "user_id": userId, "cook_book_id": cook_book_id }).then((res) => {
            console.log(res);
            if (res.data.code === 200) {
                isInShoppingList.value = !(isInShoppingList.value)
            } else {
                console.log('error');
            }
        })
    } else {
        http.post('/cook/cancelbuy', { "user_id": userId, "cook_book_id": cook_book_id }).then((res) => {
            console.log(res);
            if (res.data.code === 200) {
                isInShoppingList.value = !(isInShoppingList.value)
            } else {
                console.log('error');
            }
        })
    }
}
</script>

<style lang="scss">
.detail-food {
    position: relative;

    .food-img {
        overflow: hidden;
        width: 375px;
        height: 250px;
        margin-top: -9px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .return {
        z-index: 20;
        position: absolute;
        top: 10px;
        left: 10px;
        color: azure;
        transform: scale(2);

        .van-icon {
            top: 10px;
            left: 5px;
        }
    }

    .food-name {
        margin-top: 10px;
        margin-left: 5px;

        span {
            font-size: 20px;
            font-weight: 500;
        }
    }

    .message {
        position: relative;
        display: flex;
        align-items: center;
        margin-top: 15px;

        .head-shot {
            margin-left: 10px;
            width: 40px;
            height: 40px;
            border-radius: 90px;
        }

        .user-name {
            margin-left: 10px;
            font-size: 14px
        }

        .level {
            margin-left: 10px;
            font-size: 12px;
            font-style: italic;
            font-weight: 500;
            color: gold;
        }

        .focus {
            position: absolute;
            bottom: 8px;
            right: 10px;
            background-color: #f6c753;
            width: 95px;
            height: 25px;
            border-radius: 24px;
            display: flex;
            align-items: center;
            justify-content: center;

            span {
                font-size: 12px;
            }
        }
    }

    .introduce {
        margin: 5px;

        p {
            line-height: 38px;
        }
    }

    .food-ingredient {
        display: flex;
        flex-direction: column;

        .ingredient-header {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .ingredient-list {
                font-size: 18px;
                font-weight: 500;
            }

            .join-list {
                font-size: 13px;
                color: #6F9B92
            }
        }

        .ingredient-footer {
            P {
                line-height: 25PX;
            }
        }
    }

    .cooking-procedure {
        display: flex;
        flex-direction: column;

        .cooking-header {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .cooking-name {
                font-size: 18px;
                font-weight: 500;
            }

            .cooking-detail {
                font-size: 13px;
                color: #6F9B92
            }
        }

        .cooking-footer {
            p {
                font-size: 16px;
            }

            .step {
                width: 375px;

                img {
                    width: 100%;
                }
            }

        }
    }
}

.commit {
    position: fixed;
    bottom: 0;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60px;

    .commit-detail {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .collect {
            margin-right:10px;
            margin-left:10px;
            display: flex;
            justify-content: center;
            align-items: center;

            .collect-img {
                width: 30px;

                img {
                    width: 100%;
                }
            }

            span {
                margin-left: 3px;
                font-weight: 350;
                font-size: 14px;
            }

        }

        .learn {
            display: flex;
            justify-content: center;
            align-items: center;

            .caregry {
                width: 30px;

                img {
                    width: 100%;
                }
            }

            span {
                margin-left: 3px;
                font-weight: 350;
                font-size: 14px;
            }
        }
    }


}
</style>